<template>
  <div id="central">
    <div id="header">
      <router-link to="/" id="logo">
        <img src="../assets/img/logo.png" />
        <span>淘点二手货~</span>
      </router-link>
      <div id="search">
        <input type="text" v-model="keyword" @keyup.enter="search" />
        <router-link :to="{ path: '/search', query: { keyword: this.keyword } }"
          ><span style="font-weight: bold">搜索</span></router-link
        >
        <!-- <div @click="sendKeyword"><span style="font-weight:bold">搜索</span></div> -->
      </div>
      <div id="request" v-if="$store.state.isLogin">
        <router-link to="/releaseNeeds">发布需求</router-link>
        <router-link to="/releaseProducts">发布商品</router-link>
      </div>
      <div id="logoutRequest" v-else>
        <div @click="gotologin">发布需求</div>
        <div @click="gotologin">发布商品</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: "",
    };
  },
  methods: {
    search() {
      this.$router.push({ path: "/search", query: { keyword: this.keyword } });
    },
    gotologin() {
      this.$router.push({ path: "/login" });
    },
    logout() {
      this.$store.commit("logout");
    },
  },
};
</script>

<style scoped>
#central {
  margin: 0 auto;
  border-bottom: 2px solid #b1191a;
}

#header {
  display: flex;
  justify-content: space-around;
  color: #80a1db;
  padding: 30px;
  background-color: white;
  padding-left: 7%;
  padding-right: 7%;
}

#logo {
  display: flex;
  flex-direction: column;
  width: 100px;
  font-weight: bold;
}

#logo span {
  color: #000;
}

#search {
  padding: 20px;
  padding-top: 25px;
}

#search input {
  height: 31px;
  width: 470px;
  border: 2px solid #b1191a;
  padding-left: 10px;
  outline: none;
}

#search span {
  background-color: #b1191a;
  display: inline-block;
  height: 35px;
  line-height: 32px;
  width: 60px;
  color: white;
  padding-left: 30px;
  cursor: pointer;
  margin-top: 1px;
  margin-left: 0px;
}

#request,
#logoutRequest {
  padding: 20px;
  padding-top: 25px;
  height: 34px;
  line-height: 32px;
  display: flex;
  justify-content: space-around;
}

#request a,
#logoutRequest div {
  background-color: rgb(232, 232, 232);
  width: 90px;
  margin-right: 10px;
  padding-left: 30px;
}

#logoutRequest div {
  cursor: pointer;
  color: #2c3e50;
}

#search div {
  cursor: pointer;
  float: right;
}
</style>